<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>
			<!-- 添加分类按钮 -->
			<el-row>
				<el-button type="primary" @click="showAddCate">添加分类</el-button>
			</el-row>

			<!-- table表格 -->
			<tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border class="treeTable">
				<!-- 是否有效 -->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cate_deleted==false" style="color:lightgreen;"></i>
					<i class="el-icon-error" v-else style="color:red;"></i>
				</template>

				<!-- 排序 -->
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
					<el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
					<el-tag type="warning" size="mini" v-else>三级</el-tag>
				</template>

				<!-- 操作 -->
				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
				</template>
			</tree-table>

			<!-- 分页 -->
			<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="queryInfo.pagenum"
			:page-sizes="[1, 2, 5, 10]"
			:page-size="queryInfo.pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
	</el-card>

	<!-- 添加分类对话框 -->
	<el-dialog
	title="添加分类"
	:visible.sync="addDialogVisible"
	width="50%"
	@close="addCateDialogClosed">
	<!-- 校验规则的表单 -->
	<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
		<el-form-item label="分类名称:" prop="cat_name">
			<el-input v-model="addCateForm.cat_name"></el-input>
		</el-form-item>

		<el-form-item label="父级分类:">
			<!-- options用来指定数据元 -->
			<!-- props配置对象 -->
			<el-cascader
			v-model="selectedKeys"
			:options="parentCateList"
			@change="parentCateChanged"
			:props="cascaderProps"
			 clearable>
			</el-cascader>
		</el-form-item>
	</el-form>
	<span slot="footer" class="dialog-footer">
		<el-button @click="addDialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="addCate">确 定</el-button>
	</span>
</el-dialog>
</div>
</template>

<script>
	export default{
		data(){
			return {
				catelist:[],
				queryInfo:{
					type:3,
					pagenum:1,
					pagesize:5
				},
				total:0,
				columns:[
				{label:'分类',prop:'cat_name'},
				{label:'是否有效',type:'template',template:'isok'},
				{label:'排序',type:'template',template:'order'},
				{label:'操作',type:'template',template:'opt'}
				],
				addDialogVisible:false,
				// 添加分类表单数据对象
				addCateForm:{
					// 将要添加分类的名称
					cat_name:'',
					cat_pid:0,
					cat_level:0
				},
				addCateFormRules:{
					cat_name:[
					{ required: true, message: '请输入分类名称', trigger: 'blur' },
					{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					]
				},
				parentCateList:[],
				cascaderProps:{
					value:'cat_id',
					label:'cat_name',
					children:'children',
					expandTrigger:'hover'
				},
				//选中父级分类的id数组
				selectedKeys:[]
			}
		},
		methods:{
			// 获取商品分类数据
			async getCateList(){
				const {data:res}=await this.$http.get('categories',{params:this.queryInfo})
				console.log(res.data)
				if(res.meta.status !==200) return this.$message.error('获取数据失败')
					this.catelist=res.data.result
				this.total=res.data.total

			},
			// 监听pagesize改变的事件
			handleSizeChange(newsize){
				this.queryInfo.pagesize=newsize
				this.getCateList();
			},
			// 监听页码值的改变
			handleCurrentChange(newnum){
				this.queryInfo.pagenum=newnum
				this.getCateList();
			},
			// 点击添加按钮,添加分类
			showAddCate(){
				this.addDialogVisible=!this.addDialogVisible
				this.getParentCate()
			},
			async getParentCate(){
				const {data:res}=await this.$http.get('categories',{params:{type:2}})
				if(res.meta.status!==200)  return this.$message.error('获取父级列表失败')
					this.parentCateList=res.data
				// console.log(this.parentCate)
			},
			// 选择项变化触发的函数 
			parentCateChanged(){
				console.log(this.selectedKeys)
				if(this.selectedKeys.length>0){
					this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
					this.addCateForm.cat_level=this.selectedKeys.length
					return
				}else{
					this.addCateForm.cat_pid=0
					this.addCateForm.cat_level=0
				}
			},
			addCate(){
				this.$refs.addCateFormRef.validate(async valid=>{
					if(!valid)  return
						const {data:res}=await this.$http.post('categories',this.addCateForm) 
					if(res.meta.status !==201) return this.$message.error('添加失败')
						this.$message.success('添加成功')
						this.getCateList()
						this.addDialogVisible=!this.addDialogVisible
				})
			},
			// 监听对话框关闭事件，重置表单
			addCateDialogClosed(){
				this.$refs.addCateFormRef.resetFields()
				this.selectedKeys=[]
				this.addCateForm.cat_pid=0
				this.addCateForm.cat_level=0
			}
		},
		created(){
			this.getCateList();
		}
	}
</script>

<style scoped>
.treeTable{
	margin-top:20px;
}
</style>